<template>
  <div id="appbox3">
    <div class="backround">
      <div class="toptitle">

        <div class="item">安装位置</div>
        <div class="item">状态</div>
        <div class="item">时间</div>
      </div>
      <vue-seamless-scroll :data="listData" :class-option="optionHover" class="seamless-warp">
        <el-table class="aaa" :data="listData" :show-header="status">


          <el-table-column show-overflow-tooltip prop="CDWZ">
          </el-table-column>

          <el-table-column prop="ZT">
            <template slot-scope="scope">
              <el-tag type="primary" style="background-color: green; border: 0;color: black;"
                v-if="scope.row.ZT == '0'">在线</el-tag>
              <el-tag type="" style="background-color: yellow; border: 0;color: black;"
                v-if="scope.row.ZT == '1'">预警</el-tag>
              <el-tag type="" style="background-color: red; border: 0;color: black;"
                v-if="scope.row.ZT == '2'">报警</el-tag>
              <el-tag type="" style="background-color: grey; border: 0;color: black;"
                v-if="scope.row.ZT == '3'">异常</el-tag>
            </template>
          </el-table-column>

          <el-table-column show-overflow-tooltip prop="TIME">
          </el-table-column>
        </el-table>
      </vue-seamless-scroll>
    </div>
  </div>
</template>
<script>
import { BlsShiShiXinXi } from "../../https/api/user";
export default {
  data() {
    return {
      status: false,
      listData: [],
      windowWidth: window.innerWidth,
      time: null

    }
  },
  computed: {
    optionHover() {
      return {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  created() {
    // window.addEventListener('resize', this.handleWindowResize)

  },
  mounted() {
    this.ShiShiXinXi()
    this.time = setInterval(() => {
      this.ShiShiXinXi()

    }, 180000);
  },
  methods: {
    async ShiShiXinXi() {
      const data = {
        i: 1
      }
      const res = await BlsShiShiXinXi(data)
      console.log(res, '巴拉素实时信息');
      if (res && res.length > 0) {
        this.listData = res

      }
    },
    handleWindowResize(e) {
      const newWindowWidth = window.innerWidth;
      if (newWindowWidth !== this.windowWidth) {
        console.log(newWindowWidth);
        this.windowWidth = newWindowWidth;
        this.Onlist();
      }
    }
  },
  beforeDestroy() {　　// 离开当前路由前的操作
    clearInterval(this.time)

  }
}
</script>

<style lang="less" scoped>
#appbox3 {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.backround {
  width: 100%;
  height: 100%;
  // border: 1px solid red;
}

/deep/ .el-table__body {
  width: 100% !important;
}

/deep/.el-table__row:hover>td.el-table__cell {
  background-color: transparent !important;
}



/deep/ .el-table,
/deep/ .el-table__expanded-cell {
  background-color: transparent;
  border: none;
}

/* 表格内背景颜色 */
/deep/ .el-table th,
/deep/ .el-table tr,
/deep/ .el-table td {
  background-color: transparent;
  color: white;
  border: 0;
}

.seamless-warp {
  height: 100%;
  overflow: hidden;
  border: 0;


}

/deep/.el-table__row {
  width: 100%;
  // height: 100px;
  // border: 1px solid red;
  background-color: red;
}

/deep/.el-table .cell {
  text-align: center;
}

/deep/.toptitle {
  width: 100%;
  display: flex;
  background-color: gainsboro;
  margin-bottom: 10px;
  // border: 2px solid gainsboro;
  background-color: transparent;
  color: white;
  border: 0;
}

.item {
  width: 33.3%;
  text-align: center;
}

::v-deep .el-table::before {
  height: 0px;
}
</style>